<template>
	
	<div class="myHotgoods">
		<h4>热卖商品</h4>
		<ul>
			<li v-for="item of hootgoods" :key="item.goodsId">
				<router-link :to="{name:'goodsDetails',params:{id:item.goodsId}}">
					<img v-lazy="item.image" width="100%" />
					
				</router-link>
				<p>{{item.name}}</p>
				<p>{{item.price | rmb }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	
	export default {
		name: "myHotgoods",
		props: ["hootgoods"]	
	}
</script>

<style lang="scss" scoped="scoped">
	.myHotgoods {
		h4 {
			background-color: #ccc;
			padding: 10px 0;
			text-align: center;
		}

		ul {
			width: 98%;
			// width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			li {
				flex: 1;
				width: 50%;
				min-width: 50%; // 加入这两个后每个item的宽度就生效了
				max-width: 50%;
				height: 220px;
				text-align: center;

				img {
					width: 160px;
					height: 160px;
				}

				p {
					width: 160px;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 16px;
					white-space: nowrap;
					text-align: center;
					margin-left: 12px;
				}
			}
		}

	}
</style>
